<!DOCTYPE html>
<html style="height: 100%;width:100%; margin: 0">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%;width:100%; margin: 0">
    <div id="container" style="height: 100%;width:100%"></div>

    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=95f0a5688ec713adb3dd1735533f6fcb"></script>
    <script type="text/javascript" src="./echarts.min.js"></script>
    <script type="text/javascript" src="./tmap.js"></script>
    <script type="text/javascript" src="./data.js"></script>

    <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    var hStep = 300 / (data.length - 1);
    var busLines = [].concat.apply([], data.map(function (busLine, idx) {
        var prevPt;
        var points = [];
        for (var i = 0; i < busLine.length; i += 2) {
            var pt = [busLine[i], busLine[i + 1]];
            if (i > 0) {
                pt = [
                    prevPt[0] + pt[0],
                    prevPt[1] + pt[1]
                ];
            }
            prevPt = pt;

            points.push([pt[0] / 1e4, pt[1] / 1e4]);
        }
        return {
            coords: points,
            lineStyle: {
                normal: {
                    color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                }
            }
        };
    }));
    function onCreateMap(map) {
        map.disableScrollWheelZoom();
        map.disableDoubleClickZoom();
        map.addControl(new T.Control.Zoom());
    }
    myChart.setOption(option = {
        tmap: {
            center: [116.46, 39.92],
            zoom: 10,
            roam: true,
            style: 'black',
            onCreateMap,
        },
        series: [{
            type: 'lines',
            coordinateSystem: 'tmap',
            polyline: true,
            data: busLines,
            silent: true,
            lineStyle: {
                // color: '#c23531',
                // color: 'rgb(200, 35, 45)',
                opacity: 0.2,
                width: 1
            },
            progressiveThreshold: 500,
            progressive: 200
        }, {
            type: 'lines',
            coordinateSystem: 'tmap',
            polyline: true,
            data: busLines,
            lineStyle: {
                width: 0
            },
            effect: {
                constantSpeed: 20,
                show: true,
                trailLength: 0.1,
                symbolSize: 1.5
            },
            zlevel: 1
        }]
    });
    </script>
</body>
</html>
